<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <style>
        .bg{
          background:yellow;  
        }
        .bg2{
            color:green;
        }
    </style>
    <script>
        function doStyle(){
            // 方式一：通过css的方式
            // jQuery对象.css("样式名","样式值").css("样式名","样式值");
            // jQuery对象.css(对象);

            //方拾二：通过addClass的方式
            $(".mydiv").addClass("bg bg2");//同时添加多个类名

        }
        function doRemoveStyle(){
            //删除类样式
            $(".mydiv").removeClass("mydiv bg");//同时删除多个类样式
        }
        function doContent(){
            // console.log($(".mydiv2").html());//输出整个标签
            // console.log($(".mydiv2").text());//输出的是纯文本
            // $(".mydiv2").html("<span>我是span</span>");//自动解析span标签
            $(".mydiv2").text("<span>我是span</span>");//不会解析span标签，此时将span当成纯文本
            // 区别类似于：innerHTML和innerText的区别
        }
        function doValue(){
            //jQuery对象.val()
            // console.log($("#username").val());
            $("#username").val("嘻嘻");
        }
        function doAttr(){
            // jQuery对象.attr("属性名","属性值")：设置属性名和属性值
            // jQuery对象.attr(对象):设置多个属性名和值
            // jQuery对象.attr("属性名")：根据属性名对应属性值
            // $("#username").attr("hi","heihei");
            //$("#username").removeAttr("属性名1 属性名2"):删除多个属性
            // $("#username").attr({
            //     "heihei":"hei",
            //     "hello":"hi"
            // });

            // console.log($("#username").attr("class"));//获取属性值
            // $("#username").removeAttr("class hello");//删除属性

            console.log($("#username").attr("value"));//不建议使用这样的方式获取value值
            
        }
    </script>
</head>
<body>
    <input type="button" value="样式操作" onclick="doStyle()">
    <input type="button" value="删除样式" onclick="doRemoveStyle()">
    <input type="button" value="对文本进行操作" onclick="doContent()">
    <input type="button" value="获取文本框的值" onclick="doValue()">
    <input type="button" value="设置/获取属性" onclick="doAttr()">
    <div class="mydiv">我是div</div>
    <div class="mydiv2">
        <p>this is p</p>
    </div>
    <input type="text" id="username" value="嘻嘻嘻" class="xixi" hello="haha">
</body>
</html>